<template>
    <!-- 点击通知图标时触发显示，“系统通知”菜单项显示内容 -->
    <div id="message-advise-system-contrainer">
        <el-row>
            <span id="clear-all-messages">清空所有消息</span>
        </el-row>
        <el-row>
            <span id="message-tag">
                系统
            </span>
            &nbsp;
            <span id="message-title">
                系统通知
            </span>
            <span id="message-remove">
                <i class="el-icon-delete"/>
            </span>
            <span id="message-time">
                2020-10-01
            </span>
        </el-row>
        <el-row>
            <span id="message-content">
                张三（先生/小姐），您好！您的账号于2020-10-01 12:00:00发表不良言论，涉嫌违规，系统警告一次
                <svg-icon icon-class="warning"/>
            </span>
        </el-row>
        <el-divider/>
    </div>
</template>
<script>
export default {
    name: 'SystemAdvise'    
}
</script>
<style>
    #clear-all-messages {
        color: blue;
        font-size: 14px;
        cursor: pointer;
        float: right;
    }
    #message-tag {
        display: inline-block;
        border: 1px solid rgba(255, 0, 0, 0.678);
        border-radius: 4px;
        color: rgba(255, 0, 0, 0.678);
    }
    #message-title {
        font-size: 20px;
    }
    #message-time {
        float: right;
        font-size: 14px;
        color: #909399;
        line-height: 32px;
    }
    #message-remove {
        float: right;
        margin-left: 6%;
        font-size: 14px;
        line-height: 32px;
        cursor: pointer;
    }
    #message-content {
        display: inline-block;
        margin-top: 8px;
    }
    #message-advise-common-contrainer > .el-row:first-child {
        margin-bottom: 8px;
    }
    #message-advise-common-contrainer > .el-divider {
        margin: 12px auto;
    }
</style>